<template>
  <div>
    <div class="progress">
      <a-progress :percent="progressPercentNum" :status="activeFlag ? 'active' : null" />
      <p>{{progressTxt}}</p>
    </div>

    <div v-if="!activeFlag && getTypes == 1">
      <a-result status="error" :title="[labelData.length + '项列名称不匹配']" sub-title="">
        <template #extra>
          <a-button key="console" type="primary" @click="ensureBtnClkFn"> 确定 </a-button>
        </template>

        <div class="desc">
          <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-form-model-item v-for="(item, index) in labelData" :key="index" :label="item">
              <a-space>
                <a-select show-search allowClear style="width: 200px" placeholder="请选择列" @change="(value) => handleChange(item, value)">
                  <a-select-option v-for="(item, index) in selectOptionData" :key="index" :value="item"> {{item}} </a-select-option>
                </a-select>
              </a-space>
            </a-form-model-item>
          </a-form-model>
        </div>
      </a-result>
    </div>
  </div>
</template>

<script>
import { confirmUploadApi } from '@/services/employeeManage'

let mappedObj = {}

export default {
  name: "steps2",
  inject: ["file"],
  data () {
    return {
      labelCol: { span: 11 },
      wrapperCol: { span: 12 },
      form: {},
      labelData: [],
      selectData: [],
      progressPercentNum: 10,
      activeFlag: true,
      progressTxt: '列名称匹配中...',
      getTypes: null
    };
  },
  mounted () {
    let { mapped, sourceHeaders, sysHeaders } = this.$Storage.get('fieldMatchData')

    if (this.$Storage.get('fieldMatchData')) {
      this.labelData = sourceHeaders
      this.selectOptionData = sysHeaders
      mappedObj = mapped
    }

    if (this.$Storage.get('excelTypes')) {
      this.getTypes = this.$Storage.get('excelTypes') == 1 ? 1 : 2
    }

    if (this.getTypes == 2) {
      this.progressTxt = '正在导入数据，请勿关闭或刷新页面'
    }

  },
  created () {
    this.progressPercent()
  },
  methods: {
    progressPercent () {
      let _this = this
      const timer = setInterval(() => {
        _this.progressPercentNum = _this.progressPercentNum + 20
        if (this.progressPercentNum == 110) {
          clearInterval(timer)
          _this.activeFlag = false

          if (this.getTypes == 2) {
            _this.progressTxt = '导入成功'
            setTimeout(() => {
              _this.$parent.nextBtnClkFn(2)
            }, 2000)
          } else {
            _this.progressTxt = '列名称完成匹配'
          }
        }
      }, 1000)
    },

    handleChange (label, item) {
      Object.keys(mappedObj).forEach(key => {
        if (label == key) {
          mappedObj[key] = item
        }
      })
    },

    ensureBtnClkFn () {
      let file = this.file.get();
      let fileFormData = new FormData();
      fileFormData.append("file", file);
      if (this.getTypes == 1) { // 上传类型employee_import雇员批量导入,employee_quit员工批量离职
        fileFormData.append("type", 'employee_import');
      } else {
        fileFormData.append("type", 'employee_quit');
      }

      fileFormData.append("mappedStr", JSON.stringify(mappedObj))

      let config = {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }

      confirmUploadApi(fileFormData, config).then(res => {  // 二次匹配接口        
        if (res.data.code == 200) {
          this.$parent.nextBtnClkFn(2)
        }
      })

    }
  },
};
</script>

<style scoped lang="less">
.progress {
  max-width: 950px;
  margin: 50px auto;
  & > p {
    margin-top: 20px;
    text-align: center;
  }
}
</style>
